<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>info-list</title>
    <link rel="stylesheet" href="/webjars/bootstrap/4.1.0/css/bootstrap.css">

</head>
<body>
<div class="container">
    <a class="btn btn-light" href="/">index</a>
    <select name="pageSize" id="pageSize" th:attr="pageNum=${pageInfo.pageNum}">
        <option th:selected="${pageSize == 10}" value="10">10</option>
        <option th:selected="${pageSize == 20}" value="20">20</option>
        <option th:selected="${pageSize == 30}" value="30">30</option>
        <option th:selected="${pageSize == 50}" value="50">50</option>
    </select>
    <a class="btn btn-primary" href="/jump/info-add">add-info</a>
    <button class="btn btn-danger" id="bath-btn">bath-del</button>
    <table class="table">
        <thead class="thead-dark">
        <tr>
            <td><input type="checkbox" id="allCheck"></td>
            <td>sitecode</td>
            <td>sitename</td>
            <td>longitude</td>
            <td>latitude</td>
            <td>edit</td>
        </tr>
        </thead>
        <tbody id="info-body">
        <tr th:each="item : ${pageInfo.list}">
            <td><input type="checkbox" class="checkSiteId" th:value="${item.siteid}"></td>
            <td th:text="${item.sitecode}"></td>
            <td th:text="${item.sitename}"></td>
            <td th:text="${item.latitude}"></td>
            <td th:text="${item.longitude}"></td>
            <td>
                <a class="btn btn-light findBtn" th:href="@{'/checktime/siteavg?siteId='+${item.siteid}}"
                   th:attr="id=${item.siteid}">find-avg</a>
                <a class="btn btn-primary modifyBtn" th:href="@{'/info/jump/'+${item.siteid}}"
                   th:attr="id=${item.siteid}">modify</a>

                <a class="btn btn-danger delBtn" href="javascript:void(0);"
                   th:attr="id=${item.siteid},info-name=${item.sitename}">del</a>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary" id="firstPage"
                th:disabled="${1==pageInfo.pageNum}">首页
        </button>
        <button type="button" class="btn btn-secondary" id="prePage"
                th:disabled="${!pageInfo.hasPreviousPage}" th:attr="prePage=${pageInfo.prePage}">上一页
        </button>
        <button type="button" class="btn btn-secondary"
                th:text="${pageInfo.pageNum}+'/'+${pageInfo.pages}"></button>
        <button type="button" class="btn btn-secondary"
                th:text="'总页数'+${pageInfo.total}"></button>
        <button type="button" class="btn btn-secondary" id="nextPage"
                th:disabled="${!pageInfo.hasNextPage}" th:attr="nextPage=${pageInfo.nextPage}">下一页
        </button>
        <button type="button" class="btn btn-secondary" id="lastPage"
                th:disabled="${pageInfo.pageNum == pageInfo.pages}"
                th:attr="pages=${pageInfo.pages}">尾页
        </button>
    </div>
</div>


<script type="application/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
<script type="application/javascript">
    $(function () {
        let $pageSize = $("#pageSize");


        $pageSize.on('change', function () {
            window.location.href = '/info/page?pageNum='
                + 1 + '&pageSize=' + $pageSize.val();
        });

        $("#prePage").on('click', function () {
            var prePageVal = $(this).attr('prePage');
            window.location.href = '/info/page?pageNum='
                + prePageVal + '&pageSize=' + $pageSize.val();
        })

        $("#nextPage").on('click', function () {
            var nextPageVal = $(this).attr('nextPage');
            window.location.href = '/info/page?pageNum='
                + nextPageVal + '&pageSize=' + $pageSize.val();
        })

        $("#firstPage").on('click', function () {
            window.location.href = '/info/page' +
                '?pageNum=' + 1 + '&pageSize=' + $pageSize.val();
        })

        $("#lastPage").on('click', function () {
            let pagesVal = $(this).attr('pages');
            window.location.href = '/info/page' +
                '?pageNum=' + pagesVal + '&pageSize=' + $pageSize.val();
        })

        $('.delBtn').click(function () {
            console.log('del');
            let $this = $(this);
            let idVal = $this.attr('id');
            let infoNameVal = $this.attr('info-name');
            let flag = confirm('确定要删除' + infoNameVal + '吗？');
            if (flag) {
                $.ajax({
                    url: '/info/del/' + idVal,
                    dataType: 'JSON',
                    type: 'DELETE',
                    success: function (result) {
                        if (200 === parseInt(result.status)) {
                            if (1 === parseInt(result.data)) {
                                alert("删除成功");
                                // $this.parents('tr').remove();
                                window.location.href = window.location.href;
                            } else {
                                alert("删除失败");
                            }
                        } else {
                            alert('删除出现错误');
                        }
                    },
                    error: function () {
                        alert("server error")
                    }
                })
            }
        })

        $("#bath-btn").click(function () {
            var $checkSiteId = $(".checkSiteId:checked");
            var checkSize = $checkSiteId.length;
            if (0 === checkSize) {
                alert("请至少选择一条数据进行删除");
                return;
            }
            var chooseArray = [];
            $checkSiteId.each(function () {
                chooseArray.push($(this).val());
            });
            var batchDelFlag = confirm("确定要执行删除批量删除吗?");

            $.ajax({
                url: '/info/del',
                dataType: 'JSON',
                type: 'POST',
                data: {
                    delJson: JSON.stringify(chooseArray)
                },
                success: function (result) {
                    if (200 === parseInt(result.status)) {
                        if (1 === parseInt(result.data)) {
                            alert("批量删除成功");
                            window.location.href = window.location.href;
                        }
                    } else {
                        alert(result.desc);
                    }
                },
                error: function () {
                    alert('server error')
                }
            })
        })

        $("#allCheck").on('click', function () {
            $(".checkSiteId").prop("checked", this.checked); // this指代的你当前选择的这个元素的JS对象
        });
    })
</script>

</body>
</html>